<template>
    <div>
        <!-- 头部刷新区域 -->
        <div class="setdiv">
            <span>订单详情</span>
            <el-button class="refreshRight" plain icon="el-icon-refresh">刷新</el-button>
        </div>
        <!-- 卡片视图区域 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix getColor">
                <span>已完成</span>
            </div>
            <div>
                <div>订单信息</div>
                <el-table id="diyi" :data="userlist3" border style="width: 100%">
                    <el-table-column prop="ordernum" label="订单编号" width="180">
                    </el-table-column>
                    <el-table-column prop="type" label="订单状态" width="180">
                    </el-table-column>
                    <el-table-column prop="paymethod" label="支付方式">
                    </el-table-column>
                    <el-table-column prop="userid" label="用户账号">
                    </el-table-column>
                    <el-table-column prop="subtime" label="提交时间">
                    </el-table-column>
                    <el-table-column prop="source" label="订单来源">
                    </el-table-column>
                </el-table>
            </div>

            <!-- <div>收货人信息</div>
            <div>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="xm" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="sjh" label="手机号" width="180">
                    </el-table-column>
                    <el-table-column prop="yzbm" label="邮政编码">
                    </el-table-column>
                    <el-table-column prop="shdz" label="收货地址">
                    </el-table-column>
                </el-table>
            </div>
            <div>商品信息</div>
            <div>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="spmc" label="商品名称" width="180">
                    </el-table-column>
                    <el-table-column prop="sptp" label="商品图片" width="180">
                    </el-table-column>
                    <el-table-column prop="spdj" label="商品单价">
                    </el-table-column>
                    <el-table-column prop="sx" label="属性" width="180">
                    </el-table-column>
                    <el-table-column prop="sl" label="数量" width="180">
                    </el-table-column>
                    <el-table-column prop="mjbz" label="买家备注">
                    </el-table-column>
                    <el-table-column prop="xj" label="小计">
                    </el-table-column>
                </el-table>
            </div>
            <div>费用合计</div>
            <div>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="sphj" label="商品合计" width="180">
                    </el-table-column>
                    <el-table-column prop="yf" label="运费" width="180">
                    </el-table-column>
                    <el-table-column prop="yhje" label="优惠金额">
                    </el-table-column>
                    <el-table-column prop="fyhj" label="费用合计">
                    </el-table-column>
                </el-table>
            </div> -->
            <div>
                <div class="dingdan">订单跟踪</div>
                <div class="dingdan">物流单号：88888888</div>
            </div>
            <div style="height:300px" class="dingdan">
                <el-steps direction="vertical" :active="6">
                    <el-step title="在上海浦东公司进行发出扫描"></el-step>
                    <el-step title="在分拨中心上海浦东公司进行卸车扫描"></el-step>
                    <el-step title="在东方之珠公司地点扫描"></el-step>
                    <el-step title="订单付款成功"></el-step>
                    <el-step title="订单已提交，等待付款"></el-step>
                    <el-step title="快递已签收"></el-step>
                </el-steps>
            </div>
        </el-card>
    </div>
</template>
<style lang="less" scoped>
.setdiv {
    background-color: #f2f2f2;
    padding: 17.5px 0;
    position: relative;
}
.setdiv > span {
    margin-left: 20px;
}
.refreshRight {
    position: absolute;
    right: 20px;
    top: 8px;
}
.el-card {
    margin: 20px;
}
.dingdan {
    margin-top: 10px;
}
</style>
<script>
import date from "../../components/package";
export default {
    data() {
        return {
            // dfkdata: {
            //     ordernum: "",
            //     type: "",
            //     paymethod: "",
            //     userid: "",
            //     subtime: "",
            //     source: "",
            // },
            userlist3: [],
        };
    },
    created() {
        // this.getUserList();
        this.getOrdersList3();
    },

    methods: {
        // 初始化获取所有数据
        getOrdersList3() {
            // console.log("获取数据");
            this.$axios({
                url: "/orders/getallor3",
                // method: "get",
                // params: this.queryInfo,
            }).then((res) => {
                res.data.data.filter((v) => {
                    v.subtime = date.dateFn(v.subtime);
                });
                this.userlist3 = res.data.data;
            });
        },
    },
};
</script>